<template>
  <div class="dashboard">
    <div class="page-header">
      <h1>仪表盘</h1>
      <p>欢迎回来，{{ authStore.user?.nickname || authStore.user?.username }}！</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#409eff"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ articleStore.total }}</div>
              <div class="stat-label">文章总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#67c23a"><View /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalViews }}</div>
              <div class="stat-label">总浏览量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#e6a23c"><Star /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ totalLikes }}</div>
              <div class="stat-label">总点赞数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#f56c6c"><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ daysSinceJoined }}</div>
              <div class="stat-label">加入天数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-card class="quick-actions">
      <template #header>
        <span>快速操作</span>
      </template>
      <div class="actions-grid">
        <el-button type="primary" size="large" @click="$router.push('/admin/articles/create')">
          <el-icon><EditPen /></el-icon>
          写新文章
        </el-button>
        <el-button size="large" @click="$router.push('/admin/articles')">
          <el-icon><Document /></el-icon>
          管理文章
        </el-button>
        <el-button size="large" @click="$router.push('/admin/profile')">
          <el-icon><User /></el-icon>
          编辑资料
        </el-button>
        <el-button size="large" @click="$router.push('/')">
          <el-icon><House /></el-icon>
          查看网站
        </el-button>
      </div>
    </el-card>

    <!-- 最近文章 -->
    <el-card class="recent-articles">
      <template #header>
        <div class="card-header">
          <span>最近文章</span>
          <el-button text @click="$router.push('/admin/articles')">查看全部</el-button>
        </div>
      </template>
      
      <el-table :data="recentArticles" v-loading="articleStore.loading">
        <el-table-column prop="title" label="标题" min-width="200">
          <template #default="{ row }">
            <el-link @click="$router.push(`/articles/${row.id}`)" type="primary">
              {{ row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'info'">
              {{ row.status === 1 ? '已发布' : '草稿' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="view_count" label="浏览量" width="100" />
        <el-table-column prop="created_at" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button size="small" @click="$router.push(`/admin/articles/${row.id}/edit`)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useArticleStore } from '@/stores/article'
import {
  Document,
  View,
  Star,
  Calendar,
  EditPen,
  User,
  House
} from '@element-plus/icons-vue'

const authStore = useAuthStore()
const articleStore = useArticleStore()

// 最近文章
const recentArticles = computed(() => 
  articleStore.articles.slice(0, 5)
)

// 统计数据
const totalViews = computed(() => 
  articleStore.articles.reduce((sum, article) => sum + article.view_count, 0)
)

const totalLikes = computed(() => 
  articleStore.articles.reduce((sum, article) => sum + article.like_count, 0)
)

const daysSinceJoined = computed(() => {
  if (!authStore.user?.created_at) return 0
  const joinDate = new Date(authStore.user.created_at)
  const now = new Date()
  const diffTime = Math.abs(now.getTime() - joinDate.getTime())
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
})

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

// 获取数据
onMounted(async () => {
  try {
    await articleStore.fetchArticles({ page: 1, page_size: 10 })
  } catch (error) {
    console.error('获取文章数据失败:', error)
  }
})
</script>

<style lang="scss" scoped>
.dashboard {
  .page-header {
    margin-bottom: 30px;
    
    h1 {
      margin: 0 0 10px 0;
      color: var(--text-primary);
    }
    
    p {
      margin: 0;
      color: var(--text-secondary);
    }
  }
  
  .stats-row {
    margin-bottom: 30px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          margin-right: 20px;
        }
        
        .stat-info {
          .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 5px;
          }
          
          .stat-label {
            color: var(--text-secondary);
            font-size: 14px;
          }
        }
      }
    }
  }
  
  .quick-actions {
    margin-bottom: 30px;
    
    .actions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
      
      .el-button {
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
    }
  }
  
  .recent-articles {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

@media (max-width: 768px) {
  .stats-row {
    .el-col {
      margin-bottom: 15px;
    }
  }
  
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
